<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js + axios + api</title>
  <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<script type="text/javascript">
    function altRows(id){
        if(document.getElementsByTagName){
            var table = document.getElementById(id);
            var rows = table.getElementsByTagName("tr");
            for(i = 0; i < rows.length; i++){
                if(i % 2 == 0){
                    rows[i].className = "evenrowcolor";
                }else{
                    rows[i].className = "oddrowcolor";
                }
            }
        }
    }
    window.onload　=function(){
        altRows('alternatecolor');
    }
</script>

<!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">
    table.altrowstable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #a9c6c9;
        border-collapse: collapse;
    }
    table.altrowstable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
    }
    table.altrowstable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
    }
    .oddrowcolor{
        background-color:#d4e3e5;
    }
    .evenrowcolor{
        background-color:#c3dde0;
    }
</style>
<body>
<h1>显示列表</h1>
<div id="vue_user">
        <table border="1"  id="alternatecolor" class="altrowstable">
            <tr>
                <td>用户名</td>
                <td>密码</td>
            </tr>
            <tr v-for="u in info">
                <td>{{u.username}}</td>
                <td>{{u.password}}</td>
            </tr>
        </table>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_user',
        data: {
        },
        methods: {
        },
        data () {
            return {
              info: null
            }
        },
        mounted () {
              axios
                .get('http://localhost:7006/customers')
                .then(response => (this.info = response.data._embedded.customers))
                .catch(function (error) { // 请求失败处理
                  console.log(error);
                  });
              }
        })

</script>
</body>
</html>